<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<title>修改地址</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<script src="js/rem.js"></script>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/page.css" />
		<link rel="stylesheet" type="text/css" href="css/all.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/loaders.min.css" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />

		<script type="text/javascript">
			$(window).load(function() {
				$(".loading").addClass("loader-chanage")
				$(".loading").fadeOut(300)
			})
		</script>

		<style>
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}

			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style>
	</head>
	<!--loading页开始-->
	<div class="loading">
		<div class="loader">
			<div class="loader-inner pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	<!--loading页结束-->
	<body>
		<header class="mui-bar mui-bar-nav report-header box-s" id="header">
			<a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
			<p>添加新地址</p>
			<span class="fr baocun" id='btnSubmit'>保存</span>
		</header>
		<form>
			<div id="main" class="mui-clearfix add-address">
				<div class="plist clearfloat data">
					<ul>
						<li class="clearfloat">
							<a href="#">
								<p class="fl">收货人</p>
								<input type="text" class="fl shuru" name="name" id="name" value="" />
							</a>
						</li>
						<li class="clearfloat">
							<a href="#">
								<p class="fl">联系电话</p>
								<input type="text" class="fl shuru" name="phone" id="phone" value="" />
							</a>
						</li>
						<li class="clearfloat">
							<a href="#" id='showCityPicker3'>
								<p class="fl">请选择地区</p>
								<i class="fl shuru"></i>
							</a>



					</ul>
				</div>
				<textarea name="" rows="4" cols="" placeholder="请填写详细地址" class="textare box-s" id='address'></textarea>
				<div class="address-btn clearfloat">
					<span class="szwmr fl">设为默认</span>
					<a href="#" class="toggle toggle--on fr"></a>
				</div>
			</div>
		</form>


	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script src="js/fastclick.js"></script>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/hmt.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<!--默认按钮-->
	<script type="text/javascript">
		$('.toggle').click(function(e) {

					var toggle = this;

					e.preventDefault();

					$(toggle).toggleClass('toggle--on').toggleClass('toggle--off').addClass('toggle--moving');

					setTimeout(function() {});
	</script>


	<script src="js/mui.pi
				$(toggle).removeClass('toggle--moving');
			}, 200)
cker.js"></script>
	<script src="js/mui.poppicker.js"></script>
	<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var provinceName;
		var provinceCode;
		var cityName;
		var cityCode;
		var areaName;
		var areaCode;
		mui.init();
		mui.ready(function() {

			/**
			 * 获取对象属性的值
			 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
			 * @param {Object} obj 对象
			 * @param {String} param 属性名
			 */
			var _getParam = function(obj, param) {
				return obj[param] || '';
			};

			// 三级联动
			var cityPicker3 = new mui.PopPicker({
				layer: 3
			});
			cityPicker3.setData(cityData3);
			var showCityPickerButton = document.getElementById('showCityPicker3');
			showCityPickerButton.addEventListener('tap', function(event) {
				cityPicker3.show(function(items) {
					showCityPickerButton.innerText = "你选择的地区是：" + _getParam(items[0], 'text') + " " +
						_getParam(items[1], 'text') + " " + _getParam(items[2], 'text');

					provinceName = _getParam(items[0], 'text');
					provinceCode = _getParam(items[0], 'value');
					cityName = _getParam(items[1], 'text');
					cityCode = _getParam(items[1], 'value');
					areaName = _getParam(items[2], 'text');
					areaCode = _getParam(items[2], 'value');



					//返回 false 可以阻止选择框的关闭
					// return false;

				});
			}, false);
			$("#btnSubmit").click(function() {
				$.ajax({
					"url": baseUrl+ "/zuul-address/addresses/createAddress",
					"data": {
						uid: localStorage.getItem('uid'),
						name: $('#name').val(),
						phone: $('#phone').val(),
						provinceName: provinceName,
						provinceCode: provinceCode,
						cityName: cityName,
						cityCode: cityCode,
						areaName: areaName,
						areaCode: areaCode,
						address: $('#address').val()
					},
					"type": "post",
					"dataType": "json",
					"success": function(json) {
						// 服务器返回状态码200时触发
						if (json.state == 1000) {
							alert("地址添加成功！");
							location.replace("address.html");
						} else {
							alert(json.message);

						}
					},
					"error": function(json) {
						// 响应状态不是200时触发
						alert("登录状态失效，请重新登录！");
						// 页面重定向到login.html
						location.href = "login.html";
					}
				});
			});
		});
	</script>


</html>
